<template>
  <div id="login-container">
    <!--  头部  -->
    <!--  内容  -->
    <el-row class="container middle" :gutter="10" style="padding-top: 80px !important;">
      <el-col :lg="14">
        <!-- 摘要   -->
        <div class="introduction">
          <h1>专注于解决法律争议</h1>
          <p>是一家线上委托线下服务的法律服务机构，本机构实力雄厚，拥有全国一万多位经验丰富的加盟律师，全国各地的客户提供一对一专业服务，我机构主要针对企业债务回款、个人债务回款。</p>
          <p>拥有全国最大数据库支持，让欠款人信息及资金无所遁形，并有最权威 律师团队、法官团队，帮助客户解决回款难问题</p>
        </div>
      </el-col>
      <el-col :lg="10">
        <div class="login-box">
          <p style="color:#28A5E1;font-size: 22px;margin-bottom: 40px;font-weight: bold">登录账号</p>
          <el-form ref="form" class="input-box">
            <el-form-item class="input-item">
              <div class="icon">
                <img src="~@/assets/img/login/username@2x.png" alt="">
              </div>
              <div class="input">
                <el-input
                  type="text"
                  v-model="form.username"
                  placeholder="输入账号" />
              </div>
            </el-form-item>
            <el-form-item class="input-item">
              <div class="icon">
                <img src="~@/assets/img/login/password@2x.png" alt="">
              </div>
              <div class="input">
                <el-input
                  type="password"
                  v-model="form.password"
                  placeholder="输入密码" />
              </div>
            </el-form-item>
            <div class="code-box" style="display: flex;align-items: center;justify-content: space-between">
              <el-form-item class="input-item" style="flex: 1">
                <div class="icon">
                  <img src="~@/assets/img/login/vercode@2x.png" alt="">
                </div>
                <div class="input">
                  <el-input
                    type="text"
                    v-model="form.code"
                    placeholder="输入验证码" />
                </div>
              </el-form-item>
              <!--    图片    -->
              <div class="code-img" style="padding-left: 30px;width: 180px;">
                <img src="" alt="">
              </div>
            </div>
            <!--  记住/忘记密码   -->
            <div class="extend">
              <el-checkbox >记住用户名</el-checkbox>
              <!--  @todo 走路由   <router-link to="路由地址"></router-link>-->
              <div class="foget" style="color:#28A5E1;">忘记密码？</div>
            </div>
            <!--  提交   -->
            <el-form-item style="margin-top: 30px">
              <el-button style="width: 100%" type="primary" >登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>

export default {
  components: {},
  name: "Login",
  data() {
    return {
      navList: [
        {
          name: "首页",
          path: "/",
          children: []
        },
        {
          name: "债权服务",
          path: "/creditService",
          children: [
            {
              name: "债权交易",
              path: "/creditService/charge"
            },
            {
              name: "发布债权",
              path: "/creditService/post"
            }
          ]
        },
        {
          name: "律师服务",
          path: "/laywerServic",
          children: []
        },
        {
          name: "案源委托",
          path: "/case",
          children: []
        },
        {
          name: "公告咨询",
          path: "/notice",
          children: []
        },
        {
          name: "交流问答",
          path: "/ask",
          children: []
        },
        {
          name: "关于我们",
          path: "/aboutus",
          children: []
        }
      ],
      form: {
        username: '',
        password: '',
        code: ''
      }
    };
  },
  mounted() {

  },
  methods: {

  }
};
</script>
<style scoped>
  #login-container {
    background: url("../assets/img/login/background@2x.png") no-repeat;
    background-size: 100%;
    min-height: 100vh;
  }

  .login-menu-box {
    display: inline-flex;
    border: none;
    background-color: transparent;
  }

  .middle {
    margin: 0 auto !important;
  }

  .introduction {
    padding-top: 40px;
    color: #fff;
  }
  .introduction h1 {
    font-size: 65px;
    margin-bottom: 50px
  }
  .introduction p {
    font-size: 24px;
    margin-bottom: 50px
  }

  .login-box {
    float: right;
    width: 450px;
    padding: 30px 50px;
    background: #ffffff;
    box-shadow: 0 6px 41px 5px rgba(15, 98, 134, 0.15);
    border-radius: 6px;
  }
  .login-box >>> .el-input__inner{
    border: none;
    color: #28A5E1;
    font-size: 20px;
  }
  .login-box >>> .el-form-item__content{
    display: flex;
    align-items: center;
  }

  .login-box >>> .el-button{
    font-size: 20px;
    height: 60px;
    background: #28A5E1;
    border-radius: 4px;
  }

  .input-box {

  }

  .input-box .input-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #EFEFEF;
    margin-bottom: 20px;
    padding: 10px
  }

  .input-box .input-item .icon{
    width: 22px;
    height: 22px;
  }

  .input-box .input-item .icon img {
    width: 100%;
    height: 100%;
  }

  .input-box .input-item .input{
    display: flex;
    flex: 1;
  }

  .login-box .extend{
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px
  }

  .login-box .extend div {
    font-size: 14px
  }
</style>

